<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />

		<title>健维商城</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/product.css" />
	</head>

	<body class="bgcolor12">
		<div class="contbox">
			<div class="mui-content">

				<!--logo部分-->
				<div onclick="javascript:window.location.href='index1.html'" class="mui-row">
					<div class="mui-col-xs-12 logobox clearfix">
						<img src="img/logo_04.png" /><span>健维商城</span>
					</div>
				</div>

				<!--logo部分-->
				<!--轮播图部分-->
				<div class="mui-row">
					<div class="mui-col-xs-12">
						<div id="slider" class="mui-slider">
							<div class="mui-slider-group mui-slider-loop">
								<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#">
										<img src="img/1_02.png">
									</a>
								</div>
								<!-- 第一张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="img/1_02.png">
									</a>
								</div>
								<!-- 第二张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="img/1_02.png">
									</a>
								</div>
								<!-- 第三张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="img/1_02.png">
									</a>
								</div>
								<!-- 第四张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="img/1_02.png">
									</a>
								</div>
								<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#">
										<img src="img/1_02.png">
									</a>
								</div>
							</div>
							<div class="mui-slider-indicator">
								<div class="mui-indicator mui-active"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
							</div>
						</div>
					</div>
				</div>
				<!--轮播图部分-->
				<!--首页产品list部分-->
				<div class="mui-row">
					<div class="mui-col-xs-12 shouyebox clearfix">
						<div class="productboxlist11">
							<img src="img/sp1_08.png" />
							<h5>产品名字1</h5>
							<div class="price clearfix">
								<span>¥333</span>
								<span>购买</span>
							</div>
						</div>
						<div class="productboxlist11">
							<img src="img/sp2_08.png" />
							<h5>产品名字2</h5>
							<div class="price clearfix">
								<span>¥334</span>
								<span>购买</span>
							</div>
						</div>
						<div class="productboxlist11">
							<img src="img/sp3_16.png" />
							<h5>产品名字3</h5>
							<div class="price clearfix">
								<span>¥335</span>
								<span>购买</span>
							</div>
						</div>
						<div class="productboxlist11">
							<img src="img/sp4_15.png" />
							<h5>产品名字4</h5>
							<div class="price clearfix">
								<span>¥336</span>
								<span>购买</span>
							</div>
						</div>
					</div>
				</div>
				<!--首页产品list部分-->
				<!--努力加载中部分-->
				<div class="mui-row">
					<div class="mui-col-xs-12 jiazaizhongbox">
						<img src="img/23.gif" />
					</div>
				</div>
				<!--努力加载中部分-->
				<!--占位置高度-->
				<div style="height: 75px;"></div>
				<!--占位置高度-->
				<!--底部nav部分-->
				<nav id="navxc" class="mui-bar mui-bar-tab footernav">
					<a class="mui-tab-item mui-active">
						<span style="font-size: 23px;margin-top: 5px;" class="mui-icon iconfont">&#xe624;</span>
						<span class="mui-tab-label">商城首页</span>
					</a>
					<a class="mui-tab-item">
						<span style="font-size: 30px;margin-top: -4px;" class="mui-icon iconfont">&#xe6ee;</span>
						<span class="mui-tab-label">产品分类</span>
					</a>
					<a class="mui-tab-item">
						<span style="font-size: 25px;" class="mui-icon iconfont">&#xe653;</span>
						<span class="mui-tab-label">个人中心</span>
					</a>
				</nav>
				<!--底部nav部分-->
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			//获得slider插件对象  
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；  
			});
			//首页产品list部分的跳转链接
			var productboxlist = document.getElementsByClassName("index-product-box-list");
			for(var a = 0; a < productboxlist.length; a++) {
				productboxlist[a].addEventListener('tap', function() {
					mui.openWindow({
						url: 'produc_xq.html',
						id: 'produc_xq',
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							duration: 1000, //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							event: 'titleUpdate', //页面显示时机，默认为titleUpdate事件时显示

						}
					});
				});
			};
			//底部导航链接
			var navxc = document.getElementById("navxc");
			var hrefs = navxc.getElementsByTagName("a")
			hrefs[0].addEventListener('tap', function() {
				mui.openWindow({
					url: 'index1.html',
					id: 'index1'
				});
			});
			hrefs[1].addEventListener('tap', function() {
				mui.openWindow({
					url: 'product.html',
					id: 'product'
				});
			});
			hrefs[2].addEventListener('tap', function() {
				mui.openWindow({
					url: 'Personal.html',
					id: 'Personal'
				});
			})
		</script>
	</body>

</html>